﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>手机屏幕显示字段排序 </title>

    <link href="../../../../DataUser/Style/ccbpm.css" rel="stylesheet" type="text/css" />
    <link href="../../../Scripts/easyUI145/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="../../../Scripts/easyUI145/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.11.0.min.js"></script>
    <script src="../../Scripts/easyUI/jquery.easyui.min.js" type="text/javascript"></script>

    <script src="../../Scripts/config.js" type="text/javascript"></script>
    <script src="../../Comm/Gener.js" type="text/javascript"></script>
    <script src="../../Scripts/bootstrap/js/bootstrap.js"></script>
    <script src="../../Scripts/bootstrap/BootstrapUIDialog.js"></script>
    <link href="../../Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <script src="../../Scripts/QueryString.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../Scripts/config.js"></script>
    <script src="../../Scripts/jquery-ui.min.js"></script>
    <style>
        select::-ms-expand {
            display: none;
        }

        select {
            padding: 5px 10px;
            border: 1px solid #dcd8d8;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none; /*去掉下拉箭头*/
        }

        label {
            font-weight: normal;
        }
    </style>
    <script language="javascript" type="text/javascript">

        function ShowEditWindow(field, url) {
            if (!field || !url) {
                return;
            }

            var W = document.body.clientWidth - 240;
            var H = document.body.clientHeight - 20;
            OpenBootStrapModal(url, "EditFrame", "编辑字段：" + field, W, H, "icon-edit");
        }
        //新增分组名称
        function GroupFieldNew(ensName) {
            var name = window.prompt('请输入分组名称', '分组');
            if (name == null || name == undefined)
                return;
            var groupFields = new Entities("BP.Sys.GroupFields");
            groupFields.Retrieve("FrmID", ensName, "Lab", name);
            if (groupFields.length >= 1) {
                alert('名称：[' + name + "]已经存在.");
                return;
            }

            var group = new Entity("BP.Sys.GroupField");
            group.Lab = name;
            group.FrmID = ensName;
            group.Idx = 100;
            group.Insert();

            window.location.href = window.location.href;

        }
        //编辑分组名称
        function GroupField(fk_mapdata, OID) {
            var url = '../../Comm/EnOnly.htm?EnName=BP.Sys.GroupField&PKVal=' + OID + '&inlayer=1';
            var W = document.body.clientWidth - 240;
            var H = document.body.clientHeight - 20;
            OpenBootStrapModal(url, "EditFrame", "编辑分组", W, H, "icon-edit");

        }
        //.net保存并关闭层所用函数
        function closeDlg() {
            $('#eudlg').dialog("close");
        }
        //编辑明细表
        function EditDtl(mypk, dtlKey) {
            var url = "../../Comm/En.htm?EnName=BP.WF.Template.MapDtlExt&PKVal=" + dtlKey;
            var W = document.body.clientWidth - 240;
            var H = document.body.clientHeight - 20;
            OpenBootStrapModal(url, "EditFrame", "编辑明细表", W, H, "icon-edit");
        }
        //编辑多附件
        function EditAthMent(fk_mapdata, athMentKey) {
            var url = "../../Comm/En.htm?EnName=BP.Sys.FrmUI.FrmAttachmentExt&PKVal=" + athMentKey;
            var W = document.body.clientWidth - 240;
            var H = document.body.clientHeight - 20;
            OpenBootStrapModal(url, "EditFrame", "编辑多附件", W, H, "icon-edit");

        }
        //预览手机端
        function Form_View() {
            var url = "./MobileFrmView/FrmView.htm?IsTest=1&FrmID=" + frmID;
            OpenBootStrapModal(url, "EditFrame", "预览手机端表单", 300, 430, "icon-edit");
        }
        //复制顺序到节点
        function Form_Copy() {
            $('#nodes').dialog('open');
            $('#btns').show();
        }
        //重置字段顺序
        function From_ReSet() {
            var reSet = confirm("是否确定要重置字段顺序？");
            if (reSet == false)
                return;

            var handler = new HttpHandler("BP.WF.HttpHandler.WF_Admin_MobileFrmDesigner");
            handler.AddUrlData();

            var data = handler.DoMethodReturnString("Default_ReSet");

            if (data.indexOf('err') >= 0) {
                var message = data.split('@')[1];
                $.messager.alert('错误提示', message, 'error');
                return;
            }

            $.messager.alert('提示', '重置成功！', 'info');
            window.location.reload();
        }

        //字段分组
        function From_GroupChange(FK_MapData, keyOfEn) {
            //获取对象
            var op = document.getElementById(keyOfEn);
            //获取GroupID
            var groupID = op.options[op.selectedIndex].value;

            var mypkOfAttr = FK_MapData + '_' + keyOfEn; //主键

            var mapattr = new Entity("BP.Sys.MapAttr", mypkOfAttr);
            mapattr.GroupID = groupID;
            mapattr.Update();

            window.location.reload();

        }
        //字段或分组下移
        function btnDown(EnName, keyOfEn, type, groupID) {

            if (type == 'attr') {
                var mapAttr = new Entity("BP.Sys.MapAttr", EnName + '_' + keyOfEn);
                mapAttr.DoMethodReturnString("DoDown");
            }

            if (type == 'group') {
                var mapAttr = new Entity("BP.Sys.GroupField", keyOfEn);
                mapAttr.DoMethodReturnString("DoDown");
            }

            window.location.reload();
        }
        //字段或分组上移
        function btnUp(EnName, refKey, type, groupID) {
            if (type == 'attr') {
                var mapAttr = new Entity("BP.Sys.MapAttr", EnName + '_' + refKey);

                mapAttr.DoMethodReturnString("DoUp");
            }

            if (type == 'group') {
                var mapAttr = new Entity("BP.Sys.GroupField", refKey);
                mapAttr.DoMethodReturnString("DoUp");
            }

            window.location.reload();

        }
        function InsertTo(EnName, refKey) {
            var mapAttr = new Entity("BP.Sys.MapAttr", EnName + '_' + refKey);
            mapAttr.DoMethodReturnString("DoUp");
        }
        //复制到其他节点
        function BtnCopy() {

            var v = $('#pub1_lbNodes').val();
            if (v == null || v.length == 0) {
                alert('请选择将此排序复制到的节点！');
                return false;
            }
            var str = "";
            for (var i = 0; i < v.length; i++) {
                str += v[i] + ",";
            }
            var handler = new HttpHandler("BP.WF.HttpHandler.WF_Admin_MobileFrmDesigner");
            handler.AddPara("FK_MapData", frmID);
            handler.AddPara("NodeIDs", str);
            var data = handler.DoMethodReturnString("Default_Copy");

            if (data.indexOf('err') >= 0) {
                var message = data.split('@')[1];
                $.messager.alert('错误提示', message, 'error');
                return;
            }

            $.messager.alert('提示', '复制成功！', 'info');
        }
    </script>

    <script type="text/javascript">

        var frmID = "";
        var dtGroups = null;
        var mapAttrs = null;


        $(function () {

            frmID = GetQueryString("FK_MapData");
            if (frmID == null || frmID == undefined)
                frmID = GetQueryString("FrmID");

            InitPage();

            $('#nodes').dialog('close');
            $('#btns').hide();
            var sta = 0;
            //可拖动table
            var fixHelperModified = function (e, tr) {
                //拖动时状态改变为1
                sta = 1;
                //children() 方法返回返回被选元素的所有直接子元素
                var $originals = tr.children();
                //clone() 方法生成被选元素的副本，包含子节点、文本和属性
                var $helper = tr.clone();
                //each() 方法规定为每个匹配元素规定运行的函数
                $helper.children().each(function (index) {
                    //width() 方法返回或设置匹配元素的宽度
                    //eq() 方法将匹配元素集缩减值指定 index 上的一个
                    $(this).width($originals.eq(index).width())
                });
                return $helper;
            },
                updateIndex = function (e, ui) {
                    //ui.item - 表示当前拖拽的元素
                    //parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的
                    $('td.index', ui.item.parent()).each(function (i) {
                        //html() 方法返回或设置被选元素的内容 (inner HTML)
                        $(this).html(i + 1);
                    });
                    var EnName = GetQueryString("FK_MapData");
                    var refKey;
                    var insetToPK;
                    $("tr").mouseover(function () {

                        if (sta == 1) {

                            //当前选择的字段.
                            refKey = $(this).children('td').eq(1).html();

                            var mapAttrFrom = GetMapAttr(refKey);
                            if (mapAttrFrom == null)
                                return;

                            //插入到的字段的下一个字段.
                            insetToPK = $(this).next('tr').children('td').eq(1).html();

                            var mapAttrTo = GetMapAttr(insetToPK);
                            if (mapAttrTo != null) {
                                var myPK = EnName + '_' + refKey;
                                var mapAttr = new Entity("BP.Sys.MapAttr", myPK);
                                //获得主键值
                                insetToPK = EnName + '_' + insetToPK;
                                mapAttr.DoMethodReturnString("DoInsertTo", insetToPK);
                                window.location.href = window.location.href;
                                sta = 0; // 1.0 重置状态.
                            }
                            return;

                            alert(insetToPK);

                            if (insetToPK != undefined && insetToPK.indexOf('<') == 0) {

                                alert('移动位置错误.' + insetToPK);
                                window.location.href = window.location.href;
                                return;
                            }


                            //判断字段是否落在组件上.?
                            var isCompent = false; //是否是组件.
                            var isGroup = false; //是否落到分组上?
                            for (var i = 0; i < dtGroups.length; i++) {
                                var group = dtGroups[i];
                                if (group.Lab == insetToPK)
                                    isGroup = true;
                                if (group.Lab == insetToPK && group.CtrlType != "")
                                    isCompent = true;
                            }
                            if (isCompent == true)
                                return;

                            if (isGroup == false) {

                            }

                            sta = 0;//重置状态
                            //window.location.href = window.location.href;
                        }
                    });

                };
            $("#sort tbody").sortable({
                //设置是否在拖拽元素时，显示一个辅助的元素。可选值：'original', 'clone'
                helper: fixHelperModified,
                //当排序动作结束时触发此事件。
                cancel: '.GroupTitle',//限制不能拖动分组
                stop: updateIndex

            }).disableSelection();
        });

        function GetMapAttr(key) {
            for (var i = 0; i < mapAttrs.length; i++) {

                var attr = mapAttrs[i];
                if (attr.KeyOfEn == key)
                    return attr;
            }
            return false;
        }

        function GetGroup(key) {
            for (var i = 0; i < groupFields.length; i++) {

                var en = groupFields[i];
                if (en.Lab == key)
                    return en;
            }
            return null;
        }

        function InitPage() {

            var FK_MapData = GetQueryString("FK_MapData");
            var FK_Flow = GetQueryString("FK_Flow");

            var handler = new HttpHandler("BP.WF.HttpHandler.WF_Admin_MobileFrmDesigner");
            handler.AddUrlData();
            var data = handler.DoMethodReturnString("Default_Init");
            if (data.indexOf('err@') == 0) {
                alert(data);
                return;
            }
            data = JSON.parse(data);
            var dtGroups = data.Sys_GroupFields; //分组数据
            var mapDtls = data.Sys_MapDtls;
            mapAttrs = data.Sys_MapAttrs;
            var aths = data.Sys_FrmAttachments;

            //遍历分组.
            for (var i = 0; i < dtGroups.length; i++) {

                var group = dtGroups[i];

                //生成 bar.
                var bar = "<tr id='" + group.OID + "' class='GroupTitle'>";

                bar += "<td >" + group.OID + "</td>";
                bar += "<td >" + group.Lab + "</td>";

                bar += "<td colspan='5' class='GroupTitle' nowrap >";
                //分组的下移、上移按钮
                bar += "<a style='float:right' onclick=btnDown('" + group.FrmID + "','" + group.OID + "','group','') class='easyui-linkbutton l-btn' data-options='plain:false,iconCls:'icon-down'' href='#' group=''><span class='l-btn-left'><span class='l-btn-text icon-down l-btn-icon-left'>下移</span></span></a>";
                bar += " &nbsp;&nbsp;<a style='float:right' onclick=btnUp('" + group.FrmID + "','" + group.OID + "','group','') class='easyui-linkbutton l-btn' data-options='plain:false,iconCls:'icon-up'' href='#' group=''><span class='l-btn-left'><span class='l-btn-text icon-up l-btn-icon-left'>上移</span></span></a>";
                bar += "</td>";
                bar += "</tr>";
                $("#sort").append(bar);
                //end 生成bar.

                //如果是明细表
                if (group.CtrlType == "Dtl") {
                    //重新生成明细表表头
                    var table = "<table style='width:100%;'>";
                    table += "<tr>";
                    table += "<td nowrap=''><a href=\"javascript:EditDtl('" + frmID + "','" + group.CtrlID + "')\">" + group.CtrlID + "</a></td>";
                    table += "<td nowrap=''>" + group.Lab + "</td>";
                    //table += "<td nowrap=''>&nbsp;</td>";
                    // table += "<td valign='top' nowrap=''>&nbsp;&nbsp;<a href='./Default.htm?FK_Flow=" + FK_Flow + "&FK_MapData=" + group.CtrlID + "' target='_self' class='easyui-linkbutton l-btn' data-options='iconCls:'icon-sheet'' group='' id=''><span class='l-btn-left'><span class='l-btn-text icon-sheet l-btn-icon-left'>从表字段排序</span></span></a>";
                    table += "</table>";
                    var html = "<tr  id='compent' ><td id='compent' colspan='5' nowrap>" + table + "</td></tr>";

                    $("#sort").append(html);
                    continue;
                }

                //多附件
                if (group.CtrlType == "Ath") {

                    //重新生成多附件表头
                    var table = "";
                    table += "<table class='Table' border='0' cellpadding='0' cellspacing='0' style='width:100%'>";

                    table += "<tr>";
                    table += "<td style='text-align:center'>1</td>";
                    table += "<td nowrap=''>" + group.OID + "</td>";
                    table += "<td nowrap=''><a href=\"javascript:EditAthMent('" + frmID + "','" + group.CtrlID + "')\">" + group.CtrlID + "</a></td>";

                    table += "</tr>";
                    table += "</tbody></table>";
                    tr = "<tr><td colspan='5' npwrap>" + table + "</td></tr>";
                    $("#sort").append(tr);
                    continue;
                }

                //处理字段分组.

                //添加字段数据
                var attrIdx = 0;
                for (var j = 0, len = mapAttrs.length; j < len; j++) {

                    var mapAttr = mapAttrs[j]; //获得一个属性.
                    if (mapAttr.GroupID != group.OID)
                        continue;

                    if (mapAttr.UIVisible == 0) continue;

                    var tda = "";
                    attrIdx += 1; //记录当前分组的个数，与idx不一样。

                    //字段的上移与下移的按钮
                    var attrDown = "<a onclick=btnDown('" + group.FrmID + "','" + mapAttr.KeyOfEn + "','attr','" + mapAttr.GroupID + "') class='easyui-linkbutton l-btn' data-options='plain:false,iconCls:'icon-down'' href='#' group=''><span class='l-btn-left'><span class='l-btn-text icon-down l-btn-icon-left'>下移</span></span></a>";
                    var attrUp = "<a onclick=btnUp('" + group.FrmID + "','" + mapAttr.KeyOfEn + "','attr','" + mapAttr.GroupID + "') class='easyui-linkbutton l-btn' data-options='plain:false,iconCls:'icon-up'' href='#' group=''><span class='l-btn-left'><span class='l-btn-text icon-up l-btn-icon-left'>上移&nbsp&nbsp</span></span></a>";
                    if (attrIdx == 1) {//如果是第一个，只显示下移
                        tda += attrDown;
                    }
                    else if (attrIdx == mapAttrs.length) {//如果是最后一个，只显示上移
                        tda += attrUp;
                    }
                    else {
                        tda += attrUp;
                        tda += attrDown;
                    }

                    if (mapAttrs.length == 1) {
                        tda = "";
                    }

                    //是否显示checkbox
                    var cbox = "";
                    if (mapAttr.IsEnableInAPP == "1")
                        cbox = "<label><input type='checkbox'  onclick='IsView(this);' name='CB_" + mapAttr.KeyOfEn + "' value='" + mapAttr.KeyOfEn + "' checked=true />是否显示</label>";
                    else
                        cbox = "<label><input type='checkbox' onclick='IsView(this);' name='CB_" + mapAttr.KeyOfEn + "'  value='" + mapAttr.KeyOfEn + "' />是否显示</label>";

                    //字段行tr
                    tr = "<tr>";
                    tr += "<td class='index' style='text-align:center' >" + (j + 1) + "</td>"; //序号
                    tr += "<td  nowrap='nowrap' >" + mapAttr.KeyOfEn + "</a></td>";
                    tr += "<td  nowrap='nowrap' >" + mapAttr.Name + "</td>"; //名称
                    tr += "<td nowrap='nowrap' >" + tda + "</td>"; //字段排序
                    tr += "<td>";
                    tr += cbox; //是否显示在手机端
                    tr += "</td>";
                    tr += "</tr>";
                    $("#sort").append(tr);
                }
            }
        }

        function IsView(ctrl) {

            var field = ctrl.name.replace('CB_', '');

            var key = GetQueryString("FK_MapData") + "_" + field;
            var en = new Entity("BP.Sys.MapAttr", key);

            if (ctrl.checked == true)
                en.IsEnableInAPP = 1;
            else
                en.IsEnableInAPP = 0;
            en.Update();
        }
    </script>

</head>
<body class="easyui-layout">


    <form id="form1">

        <input type="button" onclick="From_ReSet()" value="智能重置顺序"/>
        <input type="button" onclick="Form_View()" value="预览"/>
        <input type="button" onclick="GroupFieldNew()" value="新建分组"/>
        <input type="button" onclick="From_ReSet()" value="智能重置顺序"/>

        <table class='Table' border='0' cellpadding='0' cellspacing='0' style='width:100%;border:none'>
            <!--内容显示-->
            <div id="p" style="padding:5px">
                <table id='sort' class='Table' border='0' cellpadding='0'
                       cellspacing='0' style='width: 100%;border:none'>
                </table>
            </div>
        </table>

        <center>
            <h5 style="">提示：支持字段拖动,如何操作您懂得:). </h5>
        </center>

    </form>
</body>
</html>
